<template>
  <div>
    <!-- 其他信息 -->
    <div class="card-wrap flex-column justify-end card-padding">
      <el-form :model="form" ref="other" label-width="175px" :rules="rules" :label-position="type =='detail'?'right':'top'" :disabled="type=='detail'">
        <div class="card-title-wrap">
          <span>其他信息</span>
          <span></span>
        </div>
        <div :style="{marginLeft: (type == 'detail'?'':'50px')}">
          <el-row>
            <el-col :span="8">
              <el-form-item label="超里程单价(元/KM):" prop="supplementOther.overrangePrice">
                <el-input v-if="type !=='detail'" maxlength="10" :disabled="form.supplementOther.overRange?true:false" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" v-model="form.supplementOther.overrangePrice" style="width: 70%;" />
                <span v-else>{{format_thousand(form.supplementOther.overrangePrice)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="$route.query.sourceBusinessType == '1' || form.sourceBusinessType ==1">
              <el-form-item label="省内外埠施救保证金(元):" prop="supplementOther.inProvinceSalvageDeposit">
                <el-input v-if="type !=='detail'" maxlength="10" v-model="form.supplementOther.inProvinceSalvageDeposit" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" style="width: 70%;" />
                <span v-else>{{format_thousand(form.supplementOther.inProvinceSalvageDeposit)}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="$route.query.sourceBusinessType == '1'|| form.sourceBusinessType ==1">
              <el-form-item label="省外外埠施救保证金(元):" prop="supplementOther.outsideProvinceSalvageDeposit">
                <el-input v-if="type !=='detail'" maxlength="10" v-model="form.supplementOther.outsideProvinceSalvageDeposit" oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" style="width: 70%;" />
                <span v-else>{{format_thousand(form.supplementOther.outsideProvinceSalvageDeposit)}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
  <script>
export default {
  name: "other",
  dicts: ["ven_dee"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    form: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    type() {
      let status;
      switch (this.state) {
        case "write":
          status = "edit";
          break;
        case "disabled":
          status = "detail";
          break;
        case "readonly":
          status = "detail";
          break;
        case "detail":
          status = "detail";
          break;
        case "edit":
          status = "edit";
        case "add":
          status = "add";
          break;
      }
      return status;
    },
  },
  data() {
    return {
      rules: {
        supplementOther: {
          overrangePrice: [
            { required: true, message: "请输入超里程单价", trigger: "blur" },
          ],
          inProvinceSalvageDeposit: [
            {
              required: true,
              message: "请输入省内外埠施救保证金",
              trigger: "blur",
            },
          ],
          outsideProvinceSalvageDeposit: [
            {
              required: true,
              message: "请输入省外外埠施救保证金",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  created() { },
  methods: {
    valid() {
      return new Promise(async (resolve) => {
        let result = true;
        let refs = Object.values(this.$refs);
        for (let index = 0; index < refs?.length; index++) {
          const ref = refs[index];
          if (Object.prototype.toString.call(ref) == "[object Array]") {
            for (let i = 0; i < ref.length; i++) {
              const element = ref[i];
              if (element?.valid) {
                let rc = await element?.valid?.();
                result = result && rc;
              }
              if (element?.validate) {
                let rf = await this._valid(ref);
                result = result && rf;
              }
              if (element?.form_validate) {
                let rf = await this._valid(ref, "form_validate");
                result = result && rf;
              }
            }
          } else {
            if (ref?.valid) {
              let rc = await ref?.valid?.();
              result = result && rc;
            }
            if (ref?.validate) {
              let rf = await this._valid(ref);
              result = result && rf;
            }
            if (ref?.form_validate) {
              let rf = await this._valid(ref, "form_validate");
              result = result && rf;
            }
          }
        }
        resolve(result);
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
  }
}
.app-container {
  background-color: #fff;
}
</style>
